import React, { Component } from 'react';
import '../styles/Login.css'
import { goLogin } from '../api/login'

class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            username: '',
            password: '',
            flag: false,
            agree: false
        }
    }
    //判断数据有变化时才更新，提高性能
    shouldComponentUpdate(nextProps, nextState) {
        if (JSON.stringify(this.state) == JSON.stringify(nextState)) {
            return false
        } else {
            return true
        }
    }
    //点击小锁子显示密码
    eye() {
        this.setState({
            flag: !(this.state.flag)
        })
    }
    //让表单受控
    changeIPT(e) {
        this.setState({
            [e.target.name]: e.target.name == 'agree' ? e.target.checked : e.target.value
        })
    }

    //发送登录请求,验证表单内容
    Login() {
        if (this.state.username.trim() != '' && this.state.password.trim() != '') {
            if (/^1[3456789]\d{9}$/.test(this.state.username)) {
                if (/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(this.state.password)) {
                    if (this.state.agree) {
                        goLogin({ phone: this.state.username, pass: this.state.password }).then((res) => {
                            console.log(res);
                            if (res.data.code == 200) {
                                alert('登录成功')
                                localStorage.setItem('token', res.data.token)
                                localStorage.setItem('id', res.data.userinfo.id)
                                this.props.history.push('/index')
                            } else {
                                alert('登录失败，请检查账号或密码')
                            }
                        })
                    } else {
                        alert('请勾选协议')
                    }

                } else {
                    alert('密码格式有误')
                }
            } else {
                alert('手机号格式有误')
            }
        } else {
            alert('请输入内容')
        }
    }

    //去注册
    doRegister() {
        this.props.history.push('/register')
    }

    render() {
        return (
            <div className='login'>
                <div className="lbox">
                    <i className='iconfont icon-gerenzhongxin'></i>

                    <input type="text" placeholder='请输入用户名'
                        name='username' value={this.state.username}
                        onChange={(e) => { this.changeIPT(e) }} />

                    <i className={`iconfont ${this.state.flag ? "icon-jiesuo1" : "icon-jiesuo"}`}
                        onClick={() => { this.eye() }}></i>

                    <input type={this.state.flag ? 'type' : "password"}
                        placeholder='请输入密码
                    'name='password' value={this.state.password}
                        onChange={(e) => { this.changeIPT(e) }} />
                    <p>
                        <input type="checkbox" checked={this.state.agree}
                            name='agree'
                            onChange={(e) => { this.changeIPT(e) }} />勾选用户登录协议
                    </p>
                    <button onClick={() => { this.Login() }}>登录</button>
                    <a href="" onClick={() => { this.doRegister() }}>注册</a>
                </div>
            </div>
        );
    }
}

export default Login;